<!-- 
快捷导航 2024-11-19 09:28:39
未完成 
-->
<template>
  <div class="quick-navigation">
    <el-container>
      <el-main class="main-container">
        <div class="navs-wrap">
          <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="我的工作台" name="my">
              <div class="pane-container">
                <div class="navs-container">
                  <div class="cells-container">
                    <div class="cells">
                      <template v-for="item in menuItems">
                        <el-card v-if="!item.hidden" class="cell" shadow="hover" :index="item.name" :route="{ path: item.name }" @click="handleClickCard(item)">
                          <div class="avatar"><img :src="`/imgs/quitck-navigation/${item.meta.title}.png`" /></div>
                          <div class="tt">{{ item.meta.title }}</div>
                        </el-card>
                      </template>
                    </div>
                  </div>
                </div>
                <div class="today">
                  <el-divider />
                  <el-descriptions class="margin-top" :column="1" :size="size" border>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <user />
                          </el-icon>
                          上班时间
                        </div>
                      </template>
                      {{ todayInfo.startWorkTime }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <iphone />
                          </el-icon>
                          下班时间
                        </div>
                      </template>
                      {{ todayInfo.endWorkTime }}
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <iphone />
                          </el-icon>
                          打卡时间
                        </div>
                      </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template #label>
                        <div class="cell-item">
                          <el-icon :style="iconStyle">
                            <location />
                          </el-icon>
                          午休时间
                        </div>
                      </template>
                      {{ todayInfo.startLunchTime }} - {{ todayInfo.endLunchTime }}
                    </el-descriptions-item>
                  </el-descriptions>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane v-if="false" label="工具仓库" name="roots">
              <div class="pane-container" style="position: relative">
                <div class="navs-container" ref="refNavsContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%">
                  <el-scrollbar :height="scrollbarHeight" always>
                    <div class="cells-container">
                      <el-card class="card-cell" v-for="(item, index) in iconList2" :key="index" shadow="never">
                        <template #header>
                          <div class="title">{{ item.title }}</div>
                        </template>
                        <div class="cells">
                          <el-card class="cell" shadow="hover" v-for="(item2, index2) in item.childen" :key="index2" v-bind:title="item2">
                            <div class="avatar"><img :src="`/imgs/quitck-navigation/${item2}.png`" /></div>
                            <div class="tt">{{ item2 }}</div>
                          </el-card>
                        </div>
                      </el-card>
                    </div>
                  </el-scrollbar>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-main>
      <el-aside width="400px" class="aside">
        <div class="top-bar">
          <div class="cells" v-if="false">
            <el-badge is-dot class="item">
              <el-button class="share-button" :icon="Bell" link />
            </el-badge>
          </div>
          <div>{{ nickName }} - {{ city }} - {{ identityName }}</div>
          <UserInfo />
        </div>
        <div class="calendar">
          <div class="year">{{ today.year }}</div>
          <div class="month-day">
            <div class="month">
              <b>{{ today.month.chinese }}</b>
              <span>{{ today.month.english }}</span>
            </div>
            <div class="day">{{ today.day }}</div>
            <div class="week">
              <b>{{ today.week.chinese }}</b>
              <span>{{ today.week.english }}</span>
            </div>
          </div>
          <div class="lunar">{{ today.lunar }}</div>
        </div>
        <el-card shadow="never" class="today-list" v-if="false">
          <template #header>
            <div class="card-header">
              <span>今日待办</span>
            </div>
          </template>
          <div v-for="(item, index) in todayList" :key="index" class="cell">
            <div class="tt">
              <span>[{{ item.subtitle }}]</span>
              {{ item.title }}
            </div>
            <el-icon><ArrowRightBold /></el-icon>
          </div>
        </el-card>
      </el-aside>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUsersStore, useCurrentViews } from '../stores'
import { useRouter } from 'vue-router'
import * as utils from '../utils'
import http from '../http'
import { Iphone, Location, User, Bell, ArrowRightBold } from '@element-plus/icons-vue'
import { type ComponentSize } from 'element-plus'
import { Solar } from 'lunar-javascript'
import UserInfo from '../components/Header/UserInfo.vue'

const usersStore = useUsersStore()
const router = useRouter()
const menuItems = ref<any[]>([])
const todayInfo = usersStore.getAllState() as any
const nickName = ref((useUsersStore().user as any).nickName)
const city = ref((useUsersStore().user as any).city)
const identityName = ref((useUsersStore().user as any).identityName)

/**
 * 异步获取菜单项
 *
 * 本函数通过发送HTTP GET请求来获取系统的菜单项，特别关注名为'Statistics'的菜单项的子菜单
 * 使用了async/await语法糖来处理异步操作，使得代码更加简洁易读
 */
const getMenuItems = async () => {
  // 发送HTTP GET请求，路径为'/dev-api/system/menu/getRouters'，无参数
  const res = await http({
    method: 'GET',
    path: '/dev-api/system/menu/getRouters',
    params: {},
  })
  // 在返回的数据中查找名为'Statistics'的菜单项，并将其子菜单赋值给menuItems.value
  // 如果没有找到，则menuItems.value为空数组
  menuItems.value = res.data.find((e: any) => e.name === 'Statistics')?.children || []

  // 查找menuItems.value中是否存在名为'通知'的菜单项
  const idx = menuItems.value.findIndex((e: any) => e.meta.title === '通知')
  useUsersStore().setNotice(idx > -1)
}

const handleClickCard = (item: any) => {
  useCurrentViews().setAllState(item)
  if (item.meta.link) {
    window.open(item.meta.link, '_blank', 'noopener,noreferrer')    
  } else if (item.children) {
    router.push({ path: item.children[0].name })
  } else {
    if (item.name.includes('/home/')) {
      router.push({ path: item.name })
    } else {
      router.push({ name: item.name })
    }
  }
}

const iconList2 = ref([
  {
    title: '人事',
    childen: '加班,加班餐,培训,请假,人事,审批,行政部门,资产'.split(','),
  },
  {
    title: 'Adobe',
    childen: 'AcrobatPro,AfterEffects,animate,audition,Bridge,Illustrator,indesign,Lightroom,MediaEncoder,photoshop,PremierePro,PremierePro'.split(','),
  },
  {
    title: 'Autodesk',
    childen: '3ds,Maya'.split(','),
  },
  {
    title: 'Microsoft',
    childen: 'word,excel,OneDrive,onenote,outlook,SharePoint,teams'.split(','),
  },
  {
    title: 'SESI',
    childen: 'Houdini'.split(','),
  },
  {
    title: 'The Foundry',
    childen: 'Nuke'.split(','),
  },
])
const today = ref()
const size = ref<ComponentSize>('default')
const activeName = ref('my')
const refNavsContainer = ref()
const scrollbarHeight = ref(400)

const iconStyle = computed(() => {
  const marginMap: any = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})

const todayList = ref([
  { subtitle: '动画组', title: '剧本沟通与修改' },
  { subtitle: '模型组', title: '分镜头脚本审核' },
  { subtitle: '材质组', title: '选角相关事务' },
  { subtitle: '绑定组', title: '拍摄设备检查' },
  { subtitle: '灯光组', title: '灯光布置确认' },
  { subtitle: '立体组', title: '道具准备与检查' },
  { subtitle: '特效组', title: '人员通知与安排核对' },
  { subtitle: '技术组', title: '拍摄场景搭建进度沟通' },
  { subtitle: '动画组', title: '素材整理检查' },
  { subtitle: '模型组', title: '剪辑方案讨论' },
  { subtitle: '材质组', title: '特效制作需求审核' },
  { subtitle: '绑定组', title: '项目预算审核' },
  { subtitle: '其他', title: '场地租赁尾款处理' },
])
/**
 * 将数字月份转换为中文和英文月份表示
 *
 * @param num 数字月份，取值范围1-12
 * @returns 返回包含中文和英文月份的对象
 */
const convertMonth = (num: number) => {
  const chineseMonths = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
  const englishMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

  if (num >= 0 && num <= 12) {
    return {
      chinese: chineseMonths[num],
      english: englishMonths[num],
    }
  }
  return {
    chinese: '无效月份',
    english: 'Invalid month',
  }
}
/**
 * 将数字转换为对应的中文和英文星期几
 *
 * @param num 数字，表示星期几，取值范围为1到7，1代表星期一，7代表星期日
 * @returns 包含中文和英文星期几的对象
 */
const convertWeekday = (num: number) => {
  // console.log(num)
  const chineseWeekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const englishWeekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

  if (num >= 0 && num <= 6) {
    return {
      chinese: chineseWeekdays[num],
      english: englishWeekdays[num],
    }
  } else {
    return {
      chinese: '无效星期',
      english: 'Invalid weekday',
    }
  }
}

const month = convertMonth(new Date().getMonth())
const week = convertWeekday(new Date().getDay())
// const solar = Solar.fromYmd(2025, 12, 14)
const solar = Solar.fromYmd(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
// console.log(`农历${solar.getLunar().getMonthInChinese()}月${solar.getLunar().getDayInChinese()}`)
today.value = {
  year: utils.formatDate(new Date(), 'yyyy'),
  day: utils.formatDate(new Date(), 'dd'),
  month,
  week,
  lunar: `农历${solar.getLunar().getMonthInChinese()}月${solar.getLunar().getDayInChinese()}`,
}

const handleClick = (tab: any) => {
  console.log(tab)
}

onMounted(async () => {
  await getMenuItems()
  if (refNavsContainer.value) {
    scrollbarHeight.value = refNavsContainer.value?.clientHeight
  }
})
//
</script>
<style lang="scss">
.quick-navigation {
  display: flex;
  flex-direction: column;
  height: 100%;
  .main-container {
    display: flex;
    flex-direction: column;
    .navs-wrap {
      flex: 1;
      .navs-wrap-container {
        height: 100%;
        overflow: auto;
      }
    }
    .pane-container {
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .el-tabs {
      height: 100%;
      .el-tab-pane {
        height: 100%;
      }
    }
    .navs-container {
      flex: 1;
      padding: 12px 0 24px;
      .cells-container {
        width: 100%;
        .card-cell {
          .title {
            text-align: left;
          }
          & + .card-cell {
            margin-top: 20px;
          }
        }
        .cells {
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin: -12px;
        }
        .cell {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 12px;

          img {
            width: 100%;
            display: block;
          }
          .avatar {
            width: 80px;
            height: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
          }
          .tt {
            margin-top: 8px;
            width: 80px;
            overflow: hidden;
            text-wrap: nowrap;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
    .today {
    }
    .el-descriptions__label {
      width: 120px;
    }
  }
  .aside {
    padding-right: 20px;
    .top-bar {
      display: flex;
      justify-content: flex-end;
      padding: 14px 0 13px;
      border-bottom: 1px solid rgb(221.7, 222.6, 224.4);
      .cells {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 24px;
        .el-icon {
          font-size: 24px;
        }
      }
      .user-info {
        display: flex;
        align-items: center;
        margin-right: 8px;
        .username {
          margin: 0 8px;
        }
      }
    }
    .calendar {
      width: 100%;
      height: auto;
      line-height: 1;
      padding: 40px 0;
      color: #333;
      .year {
        font-size: 24px;
        font-family: 'Times New Roman', Times, serif;
      }
      .month-day {
        display: flex;
        align-items: center;
        margin: 20px 0;
        .day {
          font-size: 100px;
          font-weight: bold;
          font-family: 'Times New Roman';
          flex: 1;
        }
        .month,
        .week {
          text-align: center;
          font-size: 18px;
          width: 120px;
          span,
          b {
            font-weight: normal;
            display: block;
          }
          span {
            margin-top: 8px;
            font-size: 16px;
            font-family: 'Times New Roman';
            color: #e69d62;
          }
        }
      }
      .lunar {
        text-align: center;
      }
    }
    .today-list {
      text-align: left;
      .card-header {
        text-align: center;
        font-size: 18px;
      }
      .cell {
        display: flex;
        font-size: 16px;
        line-height: 1;
        align-items: center;
        padding: 12px 0;
        color: #303133;
        .tt {
          flex: 1;
          span {
            font-size: 14px;
          }
        }
        .el-icon {
          opacity: 1;
          transform: translateX(-12px);
        }
        &:hover {
          cursor: pointer;
          background-color: rgb(243.9, 244.2, 244.8);
          .el-icon {
            transition: all 0.3s;
            opacity: 1;
            transform: translateX(0px);
          }
        }
      }
    }
  }
}
</style>
